<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
import { getcomment } from '@/api/comment';
import type { Ref } from 'vue';
const use = useCounterStore()
const router = useRouter()
function onClickLeft() {
  router.back();
}
interface ICommentList {
  id: number;
  name: string;
  desc: string;
  time: string;
  data: string;
}
const commentList: Ref<ICommentList[]> = ref([]);
onMounted(() => {
  getcomment().then((res) => {
    commentList.value = res.data.data;
  });
});
</script>
<template>
  <div class="header">
    <van-nav-bar title="医生详情页" left-arrow @click-left="onClickLeft" />
  </div>
  <div class="box">
    <van-card :thumb="use.doctorInfo.image" :desc="use.doctorInfo.hospital" :title="use.doctorInfo.name">
      <template #tags>
        <van-tag plain type="primary">{{ use.doctorInfo.kinds }}</van-tag>
        <van-tag plain type="primary">{{ use.doctorInfo.position }}</van-tag>
      </template>
    </van-card>
    <div class="evaluate_box">
      <h3>患者评价</h3>
      <div v-for="item in commentList" class="comment">
        <p>{{ item.desc }}</p>
        <span style="margin-right: 0.1rem">{{ item.name }}</span>
        <span style="float: right">{{ item.time }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #f7fdff;
}

p {
  padding: 0;
  margin: 0;
}

.evaluate_box {
  margin: 0 5%;

  div {
    background-color: #fff;
    padding: .1rem;
    line-height: .2rem;
    margin: .1rem 0;
    border-radius: .15rem;
    box-shadow: .03rem .03rem .1rem skyblue;
  }
}
</style>
